<template>
  <div class="term">
    <div class="common_showBox bx">
      <div class="common_searchBox br mb14">
        <div class="searchBox longBox bx">
          <img src="static/images/search.png" alt="" srcset="">
          <input type="text" placeholder="ID/名称" v-model="key" @keydown.13="queryBtn">
        </div>

        <el-button type="primary" class="queryBtn" :loading="queryBtnFlag" @click="queryBtn">查询</el-button>
      </div>
      <div class="common_titleBox br bx">
        <div class="common_title bx">
          <div class="common_title_left">学期信息</div>
          <div class="common_title_right">
            <div class="common_title_btn" @click="openLayer()">新增</div>
            <div class="common_title_btn" @click="deletBtn()">删除</div>
          </div>
        </div>
        <div class="common_form bx">
          <el-table ref="multipleTable" :data="tableData3" tooltip-effect="dark" style="width: 100%;height: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" prop="checkFlag"></el-table-column>
            <el-table-column label="序号" prop="num" width="60">
            </el-table-column>
            <el-table-column prop="id" label="学期ID" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column prop="term_name" label="学期名称" show-overflow-tooltip></el-table-column>
            <el-table-column prop="type" label="学期类型" show-overflow-tooltip></el-table-column>
            <el-table-column prop="term_start" label="开始日期" show-overflow-tooltip></el-table-column>
            <el-table-column prop="term_end" label="结束日期" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <span class="clickBtn" @click="handleEdit(scope.$index, scope.row)">修改</span>
                <span class="clickBtn" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="common_form_btnBox">
            <div @click="minPageFlag &&minPage()" class="common_form_btn_min" :class="{disableClick:!minPageFlag}">首页</div>
            <img :src="minPageFlag?'static/images/last.png':'static/images/lastNo.png'" alt="上一页" @click="minPageFlag &&lastPage()" class="common_form_btn_last">
            <div class="common_form_btn_num">{{page}}</div>
            <img :src="maxPageFlag?'static/images/next.png':'static/images/nextNo.png'" alt="下一页" @click="maxPageFlag &&nextPage()" class="common_form_btn_next">
            <div @click="maxPageFlag &&maxPage()" class="pages_form_btn_max" :class="{disableClick:!maxPageFlag}">尾页</div>
            <div class="common_form_btn_total">总共{{totalPage}}页</div>
          </div>
        </div>
      </div>
    </div>
    <div class="common_alertBox addTerm" v-if="addTermFlag">
      <div class="common_alertBox_header" v-if='!modifyFlag'>
        <span>新增学期</span>
      </div>
      <div class="common_alertBox_header" v-if='modifyFlag'>
        <span>修改学期</span>
      </div>
      <div class="common_alertBox_content">
        <div class="common_alertBox_li">
          <div class="common_alertBox_li_left ">
            <span class="importentIcon">学期名称：</span>
            <div class="chooseBox paddingInput">
              <input type="text" v-model="termData.term_name">
            </div>
          </div>
          <div class="common_alertBox_li_right">
            <span class="importentIcon">学期类型：</span>
            <div class="chooseBox down hideInput">
              <div class="maskIpnut">{{termData.type}}</div>
              <selectMk :liDataGet="termType" @change="change" dataType='termType'></selectMk>
            </div>
          </div>
        </div>
        <div class="common_alertBox_li">
          <div class="common_alertBox_li_right ">
            <span class="importentIcon">开始日期：</span>
            <div class="chooseBox  paddingInput date">

              <el-date-picker type="date" v-model="termData.term_start" placeholder="选择日期" value-format="yyyy-MM-dd">
              </el-date-picker>
            </div>
          </div>
          <div class="common_alertBox_li_right">
            <span class="importentIcon">结束日期：</span>
            <div class="chooseBox  paddingInput date">

              <el-date-picker type="date" v-model="termData.term_end" placeholder="选择日期" value-format="yyyy-MM-dd">
              </el-date-picker>
            </div>
          </div>
        </div>
        <!-- <div class="common_alertBox_li radio bx">
              <el-radio v-model="radio" label="1">星期一为一周的第一天</el-radio>
              <el-radio v-model="radio" label="2">星期日为一周的第一天</el-radio>
          </div> -->
      </div>
      <div class="common_alertBox_footer">
        <!-- <div class="common_alertBox_footer_btn sureBtn" @click="addTermSureBtn" v-if='!modifyFlag'>保存</div> -->
        <el-button type="primary" class="common_alertBox_footer_btn sureBtn" :loading="addTermSureFlag" @click="addTermSureBtn" v-if='!modifyFlag'>保存</el-button>
        <el-button type="primary" class="common_alertBox_footer_btn sureBtn" :loading="modifySureFlag" @click="modifySureBtn" v-if='modifyFlag'>修改</el-button>
        <!-- <div class="common_alertBox_footer_btn sureBtn" @click="modifySureBtn" v-if='modifyFlag'>修改</div> -->
        <el-button type="primary" class="common_alertBox_footer_btn cancelBtn" @click="cancelBtn">取消</el-button>

        <!-- <div class="common_alertBox_footer_btn cancelBtn" @click="cancelBtn">取消</div> -->
      </div>
    </div>

  </div>

  </div>
</template>

<script>
  import {
    http
  } from "../../../api/config"; //引入请求

  export default {
    name: 'term',
    data() {
      return {

        termData: {
          term_name: '',
          term_start: '',
          term_end: '',
          type: '上学期',
          typeNum: '1'
        },
        key: '',
        termType: [{
          value: '上学期',
        }, {
          value: '下学期',
        }],
        liDataGet1: [{ //输入框数据
          title: '五年级1班'
        }, {
          title: '五年级2班'
        }, {
          title: '五年级3班'
        }, {
          title: '五年级4班'
        }, {
          title: '五年级5班'
        }],
        queryBtnFlag: false,
        modifySureFlag: false,
        changeIndex:0,
        addTermSureFlag: false,
        addTermFlag: false, //添加班级开关
        modifyFlag: false,
        setTeacherFlag: false, //设置老师开关
        page: 1, //初始页数
        pagesize: 10, //页数条数
        minPageFlag: false, //最小页面开关
        maxPageFlag: true, //最大页面开关
        totalPage: 0, //总共页数
        tableData3: [{"id":21,"term_name":"第1学期","term_start":"2018-08-06","term_end":"2018-08-30","type":"下学期","typeNum":"2","num":1,"checkFlag":false}], //接收数据
        multipleSelection: [], //多选按钮
        handleEdit(index, row) { //修改事件

          this.addTermFlag = true;
          this.modifyFlag = true;
          this.termData = JSON.parse(JSON.stringify(row));

          //console.log(this.termData);
          $('.mask').show();
        },
        handleDelete(index, row) { //删除事件
          //console.log(index, row);
          //console.log(row.id)
          // this.addTeacherFlag = false;
          // this.modifyFlag = false;
          // $('.mask').hide();
          var _this = this;
          this.$confirm('此操作将永久删除' + row.term_name + ', 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {



          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        }
      }
    },
    methods: {
      change: function (e) {
        //console.log(e)
        switch (e.dataType) {
          case 'termType':
            // this.termData.work_status = e.val;
            this.termData.type = e.val;
            this.termData.typeNum = e.index;
            break;
        }
      },
      openLayer() { //显示添加班级弹窗
        this.addTermFlag = true;
        $('.mask').show();
      },
      setTeacher() { //设置教师
        this.setTeacherFlag = true;
        $('.mask').show();
      },
      deletBtn() { //删除按钮
        //console.log(this.multipleSelection)
        var _this = this;
        if (this.multipleSelection.length == 0) {
          this.$message({
            type: 'warning',
            message: '请选择学期'
          });
          return;
        }
        var nameStr = '';
        var idStr = '';
        this.multipleSelection.map(function (e) {
          nameStr += e.term_name + '、';
          idStr += e.id + ','
        });
        nameStr = nameStr.substring(0, nameStr.length - 1);
        idStr = idStr.substring(0, idStr.length - 1);
        this.$confirm('此操作将永久删除' + nameStr + ', 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      toggleSelection(rows) { //全选
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val; //选中数据
      },
      getData(page, pagesize) { //获取数据
        let _this = this;
        _this.maxPageFlag = false;
        _this.minPageFlag = false;
        var page = page;
        var pagesize = pagesize;
        var key = _this.key;


      },
      nextPage() { //下一页
        var page = this.page + 1;
        var pagesize = this.pagesize;
        this.getData(page, pagesize)
      },
      lastPage() { //上一页
        var page = this.page - 1;
        var pagesize = this.pagesize;
        this.getData(page, pagesize);
      },
      minPage() { //首页
        var page = 1;
        var pagesize = this.pagesize;
        this.getData(page, pagesize);
      },
      maxPage() { //尾页
        var page = this.totalPage;
        var pagesize = this.pagesize;
        this.getData(page, pagesize);
      },
      queryBtn() {
        if (this.key == ''&&this.changeIndex==0) {

        } else {
          this.queryBtnFlag = true;
          this.tableData3 = [];
          var page = 1;
          var pagesize = this.pagesize;
          this.getData(page, pagesize);
          this.changeIndex=0;
        }
      },
      modifySureBtn() {
        var id = this.termData.id;
        var _this = this;
        _this.modifySureFlag = true;




      },
      cancelBtn() { //取消按钮
        this.addTermFlag = false;
        this.setTeacherFlag = false;
        this.modifySureFlag = false;
        this.modifyFlag = false;
        this.addTermSureFlag = false;
        this.termData = {
          term_name: '',
          term_start: '',
          term_end: '',
          type: '上学期',
          typeNum: '1'
        };
        // this.addTermSureBtn = false;
        $('.mask').hide();
      },
      setTeacherSureBtn() { //设置教师确定按钮
        alert('保存成功')
        this.setTeacherFlag = false;
        $('.mask').hide();
      },
      addTermSureBtn() { //添加班级确定按钮
        //console.log(this.termData)

        if (this.trim(this.termData.term_name) === '') {
          this.$message.error('学期名称不能为空');
          return;
        } else if (this.trim(this.termData.term_start) === '') {
          this.$message.error('开始日期不能为空');
          return;
        } else if (this.trim(this.termData.term_end) === '') {
          this.$message.error('结束日期不能为空');
          return;

        }

        var _this = this;
        _this.addTermSureFlag = true;



      },
      keyWatch(val) { // 实时监听数据变化
       this.changeIndex++;
      }
    },
    watch: {
      key(val) { // 实时监听数据变化
        this.keyWatch(val)
      }
    },
    created: function () { //初始化
      var page = this.page;
      var pagesize = this.pagesize;
      this.getData(page, pagesize);
      this.checkLogin(); //获取登陆

    },
    beforeRouteEnter(to, from, next) {
      //传给父组建值
      next(vm => {
        vm.$emit('pageName', to.name)
      });


    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .select {
    width: 226px;
    box-sizing: border-box;
  }


  .chooseBox {
    margin: 0;
    width: 226px;
    position: relative;
    /* padding-right: 56px; */
    box-sizing: border-box;
  }



  .classManagement_alert_li {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
  }

  .classManagement_alert_right,
  .classManagement_alert_left {
    width: 50%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .message-box__footer {
    padding: 35px 275px 0;
    height: 35px;
    display: flex;
    justify-content: space-between;
  }

  .message-box__Btn {
    width: 118px;
    height: 35px;
    line-height: 35px;
    border-radius: 18px;
    color: #fff;
    background: #1985ce;
  }

  .message-box__sureBtn .pages_form_btnBox {
    font-size: 18px;
    color: #757575;
  }

  .disableClick {
    color: #bebebe;
  }

  .common_form_btn_min {
    margin-right: 13px;
  }

  .pages_form_btn_next {
    margin-right: 10px;
  }

  .pages_form_btn_max {
    margin-right: 32px;
  }

  .pages_form_btn_total {
    margin-right: 35px;
  }

  .pages_form_btn_last {
    margin-right: 26px;
  }

  .pages_form_btn_num {
    width: 37px;
    height: 37px;
    background: #fff;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
    line-height: 37px;
    text-align: center;
    border-radius: 50%;
    margin-right: 26px;
  }

  .class {
    position: relative;
    width: 100%;
    height: 100%;
    /* border-top: 1px solid rgba(0, 0, 0, 0); */
  }

  .classManagementList {
    width: 100%;
    height: 100%;
    margin-top: 0;
    position: relative;
  }

  .classManagement_title {
    position: absolute;
    left: 0;
    top: 100px;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
  }

  .classManagement_title_left {
    font-size: 22px;
    line-height: 60px;
    font-weight: 900;
    margin-left: 10px;
    color: #636363;
  }

  .classManagement_title_right {
    display: flex;
    align-items: center;
  }

  .classManagement_title_btn {
    margin-right: 30px;
    /* width: 180px; */
    padding: 0 27px;
    height: 34px;
    background: #2286cf;
    border-radius: 34px;
    line-height: 34px;
    color: #fff;
  }



  .campusManagementBox {
    width: 100%;
    height: 100%;
    padding-top: 98px;
    position: relative;
  }

  .campus {
    width: 100%;
    height: 100%;
    background: #fff;
    padding-top: 60px;
    position: relative;
  }

  .campusManagement_title {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
  }

  .campusManagement_title_left {
    font-size: 22px;
    line-height: 60px;
    font-weight: 900;
    margin-left: 10px;
  }

  .campusManagement_title_right {
    display: flex;
    align-items: center;
  }


  .campusManagement_weekName {
    position: absolute;
    left: 0;
    top: 60px;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    line-height: 40px;
  }

  .weekName_title {
    width: 10%;
  }

  .weekName_li {
    width: 18%;
  }

  .commonBox_courseTableBox {
    width: 100%;
    height: 100%;
    display: flex;
  }

  .commonBox_courseTable_left {
    width: 10%;
  }

  .commonBox_courseTable_right {
    width: 90%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }

  .commonBox_courseTable_left_li {
    height: 16.67%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .commonBox_courseTable_right_li {
    width: 19.7%;
    height: 16%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #4db3f8;
    border-radius: 4px;
    font-size: 28px;
    color: #fff;
  }

  /* 更正 */

  .term {
    height: 100%;
  }

  .common_alertBox_li_right,
  .common_alertBox_li_left {
    width: 50%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 20px;
  }

  .addTerm {
    width: 833px;
    height: 377px;
  }

  .common_alertBox_li.radio {
    padding-right: 236px;

    margin: 20px 0;

  }

  .common_alertBox_li.radio label {
    margin-left: 70px;
    font-size: 18px;
    height: 30px;
  }

  /* 更正 */

</style>
